<template>
  <view class="repair-container">
    <view class="page-header">
      <text class="page-title">报事报修</text>
    </view>
    
    <view class="form-container">
      <!-- 选择地址 -->
      <view class="form-item" style="margin-top: 16px;">
        <view class="form-label">
          <text class="required">*</text>选择地址
        </view>
        <view class="address-selector" @click="openAddressPicker">
          <text class="placeholder-text" v-if="!formData.fullAddress">请选择省市区镇村/门牌</text>
          <text v-else class="address-text">{{ formData.fullAddress }}</text>
          <text class="arrow-icon">›</text>
        </view>
        <view v-if="formData.noAddress" class="no-address-tip">
          未找到您的地址？请拨打客服电话：<text class="phone">4006983338</text>
        </view>
      </view>
      
      <!-- 联系电话 -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>联系电话
        </view>
        <input class="form-input" type="text" v-model="formData.operaPhone" placeholder="请输入手机号或固定电话" />
      </view>
      
      <!-- 问题描述 -->
      <view class="form-item">
        <view class="form-label">
          <text class="required">*</text>问题描述
        </view>
        <view class="textarea-container">
          <textarea class="form-textarea" v-model="description" placeholder="请详细描述您遇到的问题..." maxlength="200" />
          <view class="word-count">{{ description.length }}/200</view>
        </view>
      </view>
      
      <!-- 图片上传 -->
      <view class="form-item">
        <view class="form-label">
          <text>添加图片</text>
          <text class="upload-tip">(最多可上传9张)</text>
        </view>
        <view class="upload-area">
          <view class="image-preview" v-for="(item, index) in imageList" :key="index">
            <image :src="item" mode="aspectFill"></image>
            <view class="delete-icon" @click="deleteImage(index)">
              <text class="iconfont icon-close"></text>
            </view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="imageList.length < 9">
            <view class="dashed-border">
              <view class="upload-icon-container">
                <uni-icons type="camera-filled" size="24" color="#999"></uni-icons>
                <text class="upload-text">上传图片</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 报修类型选择 -->
      <view class="repair-type-section">
        <view class="section-title">我想要</view>
        <view class="type-options">
          <view 
            class="type-item" 
            v-for="(item, index) in typeOptions" 
            :key="index"
            :class="{ active: selectedType === item.value }"
            @click="selectType(item.value)"
          >
            <view class="type-icon" :class="{ 'active-icon': selectedType === item.value }">
              <uni-icons :type="item.icon" size="28" :color="selectedType === item.value ? '#07c160' : '#999'"></uni-icons>
            </view>
            <text class="type-name" :class="{ 'active-text': selectedType === item.value }">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn-container">
      <view class="submit-btn" @click="submitRepair">
        提交
      </view>
    </view>
    
    <!-- 微信风格地址选择弹窗 -->
    <uni-popup ref="addressPopup" type="bottom">
      <view class="wx-popup-content">
        <view class="wx-popup-header">
          <view v-if="deptPath.length > 0" class="wx-back-btn" @click="goBackDept"><text class="wx-back-arrow">←</text></view>
          <view class="wx-breadcrumb">
            <text v-for="(item, idx) in deptPath" :key="item.id" class="wx-breadcrumb-item" @click="goToDept(idx)">{{ item.label }}</text>
          </view>
        </view>
        <view class="wx-popup-title">选择地址</view>
        <view class="wx-list-wrap">
          <view v-for="item in filteredDeptList" :key="item.id" class="wx-list-item" :class="{ active: isDeptActive(item) }" @click="onDeptSelect(item)">
            <text>{{ highlightKeyword(item.label, searchKeyword) }}</text>
            <text v-if="item.children && item.children.length" class="wx-arrow">›</text>
          </view>
        </view>
        <view v-if="showHouseList || filteredHouseList.length > 0">
          <view class="wx-popup-title-sub wx-blue-bar">房产地址</view>
          
          <!-- 房产地址搜索框 -->
          <view class="house-search-container">
            <view class="search-input-wrapper">
              <uni-icons type="search" size="16" color="#999"></uni-icons>
              <input 
                class="house-search-input" 
                v-model="houseSearchKeyword"
                placeholder="请输入业主姓名、门牌号等关键词搜索"
                @input="onHouseSearch"
                @focus="onHouseSearchFocus"
                @blur="onHouseSearchBlur"
              />
              <text v-if="houseSearchKeyword" class="clear-btn" @click="clearHouseSearch">×</text>
            </view>
          </view>
          
          <view class="wx-list-wrap">
            <view v-for="house in filteredHouseList" :key="house.id" class="wx-list-item" @click="onHouseSelect(house)">
              <text class="wx-address-text">{{ getFullDeptNameByIds(house) }}/{{ house.address }}（{{ house.door }}）</text>
            </view>
          </view>
          <view v-if="filteredHouseList.length === 0" class="no-address-tip">
            <view class="no-address-content">
              <uni-icons type="info" size="16" color="#ff6b6b"></uni-icons>
              <text class="no-address-text">未找到您的地址？</text>
            </view>
            <view class="contact-info">
              <text class="contact-label">请拨打客服电话：</text>
              <text class="phone-number" @click="callService">4006983338</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import request from '@/utils/request';
import config from '@/config';
import { addRepair, uploadImage } from '@/api/door/repair';

export default {
  components: {
    uniIcons: () => import('@/uni_modules/uni-icons/components/uni-icons/uni-icons')
  },
  data() {
    return {
      formData: {
        name: '',
        operaPhone: '',
        province: '', 
        city: '', 
        district: '', 
        street: '', 
        village: '', 
        addressId: '', 
        fullAddress: '', 
        noAddress: false,
        door: ''
      },
      description: '',
      imageList: [],
      maxImages: 9,
      selectedType: '门禁故障',
      typeOptions: [
        { name: '门禁故障', value: '门禁故障', icon: 'lock' },
        { name: '设备故障', value: '设备故障', icon: 'gear' },
        { name: '网络故障', value: '网络故障', icon: 'wifi' },
        { name: '其他', value: '其他', icon: 'more-filled' }
      ],
      deptTree: [], // 省市区县镇村树
      deptPath: [], // 当前选择路径
      currentDeptList: [], // 当前展示的子节点
      searchKeyword: '',
      filteredDeptList: [],
      showHouseList: false,
      houseList: [],
      houseSearchKeyword: '',
      filteredHouseList: []
    }
  },
  onLoad(options) {
    // 获取用户手机号
    const userInfo = this.$store.state.user;
    if (userInfo && userInfo.phonenumber) {
      this.formData.phone = userInfo.phonenumber;
      this.formData.name = userInfo.nickName || '';
    }
    
    // 获取地址树
    this.getDeptTree();
  },
  methods: {
    async getDeptTree() {
      try {
        const res = await request({ url: '/system/user/deptTreeNoDataScope', method: 'get' });
        if (res.code === 200 && res.data && res.data.length) {
          this.deptTree = res.data;
        } else {
          this.deptTree = [];
        }
      } catch (e) {
        this.deptTree = [];
      }
    },
    goBack() {
      uni.navigateBack();
    },
    openAddressPicker() {
      this.deptPath = [];
      this.searchKeyword = '';
      this.houseSearchKeyword = '';
      this.showHouseList = false;
      this.currentDeptList = this.deptTree.length ? this.deptTree[0].children : [];
      this.filteredDeptList = this.currentDeptList;
      
      this.$nextTick(() => {
        this.$refs.addressPopup.open();
      });
    },
    closeAddressPopup() {
      this.$refs.addressPopup.close();
      this.searchKeyword = '';
      this.houseSearchKeyword = '';
      this.showHouseList = false;
      this.deptPath = [];
      this.currentDeptList = [];
      this.filteredDeptList = [];
      this.houseList = [];
      this.filteredHouseList = [];
      console.log('关闭地址选择弹窗，清空搜索条件');
    },
    goBackDept() {
      if (this.deptPath.length > 0) {
        this.deptPath.pop();
        if (this.deptPath.length === 0) {
          this.currentDeptList = this.deptTree.length ? this.deptTree[0].children : [];
        } else {
          this.currentDeptList = this.deptPath[this.deptPath.length - 1].children || [];
        }
        this.filteredDeptList = this.currentDeptList;
        this.searchKeyword = '';
      }
    },
    goToDept(idx) {
      this.deptPath = this.deptPath.slice(0, idx + 1);
      this.currentDeptList = this.deptPath[idx].children || [];
      this.filteredDeptList = this.currentDeptList;
      this.searchKeyword = '';
    },
    isDeptActive(item) {
      return this.deptPath.length && this.deptPath[this.deptPath.length - 1].id === item.id;
    },
    onDeptSelect(item) {
      // 只在进入下一级时push，末级节点不push
      if (item.children && item.children.length) {
        this.deptPath.push(item);
        this.currentDeptList = item.children;
        this.filteredDeptList = this.currentDeptList;
        this.searchKeyword = '';
      } else {
        // 末级节点（如镇），只保留一个，不重复push
        if (!this.deptPath.length || this.deptPath[this.deptPath.length - 1].id !== item.id) {
          // 移除已有同级镇
          if (this.deptPath.length && this.deptPath[this.deptPath.length - 1].level === item.level) {
            this.deptPath.pop();
          }
          this.deptPath.push(item);
        }
        this.fetchHouseList(item.id);
      }
    },
    // 修改获取房产列表方法
    async fetchHouseList(deptId) {
      try {
        const res = await request({
          url: '/door/adsl/list',
          method: 'get',
          params: { 
            pageNum: 1, 
            pageSize: 100000,
            village: deptId  // 使用城市ID作为参数
          }
        });
        if (res.code === 200 && res.rows) {
          this.houseList = res.rows;
          this.filteredHouseList = this.houseList;
          console.log('获取房产列表成功:', this.houseList.length, '条');
        } else {
          this.houseList = [];
          this.filteredHouseList = [];
          console.log('获取房产列表失败:', res.msg);
        }
      } catch (e) {
        console.error('获取房产列表异常:', e);
        this.houseList = [];
        this.filteredHouseList = [];
      }
      this.showHouseList = true;
    },

    // 修改选择房产方法
    onHouseSelect(house) {
      const fullAddress = `${house.provinceName}/${house.cityName}/${house.districtName}/${house.streetName}/${house.villageName}/${house.address}`;
      this.formData = {
        ...this.formData,
        addressId: house.id,
        fullAddress,
        province: house.province,
        city: house.city,
        district: house.district,
        street: house.street,
        village: house.village,
        door: house.door,
        noAddress: false
      };
      this.closeAddressPopup();
    },
    getFullDeptNameByIds({ province, city, district, street, village }) {
      // 递归deptTree查找名称，顺序：省/市/区/镇/村
      let names = [];
      let node = this.deptTree && this.deptTree[0];
      if (!node) return '';
      function findChild(children, id) {
        if (!children || !id) return null;
        for (let c of children) {
          if (c.id === id) return c;
        }
        return null;
      }
      let cur = node;
      if (province) { cur = findChild(cur.children, province); if (cur) names.push(cur.label); }
      if (city) { cur = findChild(cur.children, city); if (cur) names.push(cur.label); }
      if (district) { cur = findChild(cur.children, district); if (cur) names.push(cur.label); }
      if (street) { cur = findChild(cur.children, street); if (cur) names.push(cur.label); }
      if (village) { cur = findChild(cur.children, village); if (cur) names.push(cur.label); }
      return names.join('/')
    },
    highlightKeyword(label, keyword) {
      if (!keyword) return label;
      return label.replace(new RegExp(keyword, 'g'), `<span style="color:#07c160">${keyword}</span>`);
    },
    chooseImage() {
      if (this.imageList.length >= this.maxImages) {
        uni.showToast({
          title: `最多上传${this.maxImages}张图片`,
          icon: 'none'
        });
        return;
      }
      
      uni.chooseImage({
        count: this.maxImages - this.imageList.length,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          this.imageList = [...this.imageList, ...res.tempFilePaths];
        }
      });
    },
    deleteImage(index) {
      this.imageList.splice(index, 1);
    },
    selectType(type) {
      this.selectedType = type;
    },
    submitRepair() {
      // 表单验证
      if (!this.formData.fullAddress) {
        uni.showToast({
          title: '请选择地址',
          icon: 'none'
        });
        return;
      }
      
      if (!this.formData.operaPhone || !this.isValidPhone(this.formData.operaPhone)) {
        uni.showToast({
          title: '请输入正确的手机号或固定电话',
          icon: 'none'
        });
        return;
      }
      
      if (!this.description.trim()) {
        uni.showToast({
          title: '请描述您遇到的问题',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载中
      uni.showLoading({
        title: '提交中...'
      });
      
      // 处理图片上传
      this.uploadImages().then(imageUrls => {
        // 调用报修API
        const repairData = {
          adslId: this.formData.addressId,
          repairContent: this.description,
          createPhone: this.formData.operaPhone,
          //这里处理图片，需要把图片的url拼接起来
          repairImgs: imageUrls.map(url => url.replace('http://charging-prod.szhansel.com/', '')).join(','),
          repairType: this.selectedType // 现在使用中文类型
        };
        
        addRepair(repairData).then(res => {
          uni.hideLoading();
          if (res.code === 200) {
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            });
            // 提交成功后返回
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            uni.showToast({
              title: res.msg || '提交失败，请重试',
              icon: 'none'
            });
          }
        }).catch(error => {
          uni.hideLoading();
          uni.showToast({
            title: '提交失败，请重试',
            icon: 'none'
          });
          console.error('报修提交失败:', error);
        });
      }).catch(() => {
        uni.hideLoading();
        uni.showToast({
          title: '图片上传失败，请重试',
          icon: 'none'
        });
      });
    },
    
    // 上传图片方法
    async uploadImages() {
      if (this.imageList.length === 0) {
        return Promise.resolve([]);
      }
      
      const uploadTasks = this.imageList.map(tempFilePath => {
        return uploadImage(tempFilePath);
      });
      
      return Promise.all(uploadTasks);
    },
    
    // 房产搜索
    onHouseSearch(e) {
      const keyword = e.detail.value || this.houseSearchKeyword;
      this.houseSearchKeyword = keyword;
      
      if (!keyword.trim()) {
        this.filteredHouseList = this.houseList;
        return;
      }
      
      // 模糊搜索房产地址
      this.filteredHouseList = this.houseList.filter(house => {
        const searchText = keyword.toLowerCase();
        const houseText = `${house.address || ''} ${house.door || ''} ${house.ownerName || ''}`.toLowerCase();
        return houseText.includes(searchText);
      });
    },
    
    // 房产搜索框获得焦点
    onHouseSearchFocus() {
      // 可以在这里添加搜索框获得焦点时的逻辑
    },
    
    // 房产搜索框失去焦点
    onHouseSearchBlur() {
      // 可以在这里添加搜索框失去焦点时的逻辑
    },
    
    // 清空房产搜索
    clearHouseSearch() {
      this.houseSearchKeyword = '';
      this.filteredHouseList = this.houseList;
    },
    
    // 拨打客服电话
    callService() {
      uni.showModal({
        title: '拨打客服电话',
        content: '确定拨打客服电话 4006983338 吗？',
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: '4006983338',
              success: () => {
                console.log('拨打客服电话成功');
              },
              fail: (err) => {
                console.error('拨打客服电话失败:', err);
                uni.showToast({
                  title: '拨打失败，请手动拨打',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    },
    
    // 验证手机号或固定电话
    isValidPhone(phone) {
      if (!phone) return false;
      
      // 手机号验证：1开头，第二位3-9，总共11位
      const mobileRegex = /^1[3-9]\d{9}$/;
      
      // 固定电话验证：
      // 1. 区号3-4位（0开头）+ 7-8位号码，可选中间的横线
      // 2. 支持格式：0755-12345678、075512345678、021-1234567、02112345678等
      const landlineRegex = /^0\d{2,3}-?\d{7,8}$/;
      
      return mobileRegex.test(phone) || landlineRegex.test(phone);
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.page-header {
  padding: 30rpx 0;
  text-align: center;
  background-color: #fff;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff4d4f;
}

.form-container {
  padding: 0 30rpx;
}

.form-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  
  .required {
    color: #ff4d4f;
    margin-right: 4rpx;
  }
  
  .upload-tip {
    font-size: 24rpx;
    color: #999;
    margin-left: 10rpx;
  }
}

.form-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f7f7f7;
  padding: 20rpx;
  border-radius: 8rpx;
  
  .placeholder-text {
    color: #999;
  }
  
  .iconfont {
    color: #ccc;
    font-size: 30rpx;
  }
}

.form-input {
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
  color: #333;
  background-color: #f7f7f7;
  padding: 0 20rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.textarea-container {
  position: relative;
  width: 100%;
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  font-size: 30rpx;
  color: #333;
  line-height: 1.5;
  background-color: #f7f7f7;
  padding: 20rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.word-count {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  font-size: 24rpx;
  color: #999;
  z-index: 1;
  background-color: rgba(247, 247, 247, 0.8);
  padding: 0 10rpx;
}

.upload-area {
  display: flex;
  flex-wrap: wrap;
}

.image-preview {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
  
  image {
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
  }
  
  .delete-icon {
    position: absolute;
    top: -20rpx;
    right: -20rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24rpx;
  }
}

.upload-btn {
  width: 160rpx;
  height: 160rpx;
  position: relative;
  
  .dashed-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2rpx dashed #ccc;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .upload-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .upload-text {
    font-size: 22rpx;
    color: #999;
    margin-top: 8rpx;
  }
}

.repair-type-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.type-options {
  display: flex;
  justify-content: space-around;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  width: 33.33%;
  
  &.active {
    .type-name {
      color: #07c160;
    }
  }
}

.type-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  
  .iconfont {
    font-size: 50rpx;
    color: #999;
  }
  
  &.active-icon {
    background-color: #e8f7e8;
    
    .iconfont {
      color: #07c160;
    }
  }
}

.type-name {
  font-size: 28rpx;
  color: #666;
  
  &.active-text {
    color: #07c160;
  }
}

.submit-btn-container {
  position: fixed;
  bottom: 20rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 30rpx;
}

.submit-btn {
  width: 90%;
  height: 90rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 45rpx;
}

.no-address-tip {
  background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
  border: 1px solid #ffebeb;
  border-radius: 12rpx;
  padding: 24rpx;
  margin: 16rpx 24rpx;
  text-align: center;
  
  .no-address-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12rpx;
    
    .no-address-text {
      color: #ff6b6b;
      font-size: 28rpx;
      font-weight: 500;
      margin-left: 8rpx;
    }
  }
  
  .contact-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
    .contact-label {
      color: #666;
      font-size: 26rpx;
      margin-right: 8rpx;
    }
    
    .phone-number {
      color: #1989fa;
      font-size: 28rpx;
      font-weight: bold;
      text-decoration: underline;
      padding: 4rpx 8rpx;
      border-radius: 6rpx;
      background-color: rgba(25, 137, 250, 0.1);
      
      &:active {
        background-color: rgba(25, 137, 250, 0.2);
      }
    }
  }
}

.address-selector {
  width: 100%;
  height: 80rpx;
  background-color: #f7f7f7;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  
  .placeholder-text {
    color: #999;
    font-size: 30rpx;
  }
  
  .address-text {
    color: #333;
    font-size: 30rpx;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .arrow-icon {
    font-size: 36rpx;
    color: #ccc;
    margin-left: 10rpx;
    transform: rotate(90deg);
  }
}
</style>

<style lang="scss">
.wx-popup-content {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 0 0 24rpx 0;
  min-height: 60vh;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.wx-popup-header {
  display: flex;
  align-items: center;
  padding: 18rpx 24rpx 0 24rpx;

  .wx-back-btn {
    margin-right: 12rpx;
    color: #07c160;
    font-size: 36rpx;
    cursor: pointer;
  }

  .wx-breadcrumb {
    display: flex;
    flex-wrap: wrap;

    .wx-breadcrumb-item {
      color: #07c160;
      font-size: 28rpx;
      margin-right: 8rpx;
      cursor: pointer;

      &:after {
        content: "/";
        color: #bbb;
        margin-left: 8rpx;
      }

      &:last-child:after {
        content: "";
      }
    }
  }
}

.wx-popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  padding: 24rpx 24rpx 12rpx 24rpx;
}

.wx-popup-title-sub {
  font-size: 28rpx;
  color: #07c160;
  padding: 12rpx 24rpx 0 24rpx;

  &.wx-blue-bar {
    border-left: 8rpx solid #07c160;
    padding-left: 16rpx;
    background: #f7f7f7;
  }
}

.wx-list-wrap {
  padding: 0 24rpx;

  .wx-list-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    padding: 28rpx 24rpx;
    font-size: 30rpx;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid #f0f0f0;
    transition: background 0.2s, border 0.2s;

    &.active,
    &:hover {
      background: #eafaf1;
      border: 1px solid #07c160;
      color: #07c160;
    }

    .wx-arrow {
      font-size: 32rpx;
      color: #bbb;
      margin-left: 10rpx;
    }

    .wx-address-text {
      font-size: 28rpx;
      color: #333;
      word-break: break-all;
    }
  }
}

.house-search-container {
  margin-top: 20rpx;
  padding: 0 24rpx 20rpx 24rpx;
  
  .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 24rpx;
    padding: 20rpx 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    
    &:focus-within {
      border-color: #07c160;
      box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.15);
      background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
    }
    
    .house-search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      background: transparent;
      border: none;
      outline: none;
      margin-left: 16rpx;
      line-height: 1.4;
      
      &::placeholder {
        color: #999;
        font-size: 26rpx;
      }
      
      &:focus {
        color: #07c160;
      }
    }
    
    .clear-btn {
      width: 36rpx;
      height: 36rpx;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 22rpx;
      font-weight: bold;
      margin-left: 16rpx;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2rpx 6rpx rgba(255, 107, 107, 0.3);
      
      &:active {
        transform: scale(0.9);
        box-shadow: 0 1rpx 4rpx rgba(255, 107, 107, 0.4);
      }
      
      &:hover {
        background: linear-gradient(135deg, #ff5252 0%, #ff4444 100%);
        box-shadow: 0 4rpx 8rpx rgba(255, 107, 107, 0.4);
      }
    }
  }
}
</style> 